<template>
    <div>
        <div>
            用户名：<el-input v-model="vo.username" placeholder="请输入用户名" style="width:222px"></el-input>
            账号: <el-input v-model="vo.accountid" placeholder="请输入内容" style="width:222px"></el-input>
            创建时间：
            <el-date-picker
            v-model="vo.datebegin"
            type="datetime"
            value-format="yyyy-MM-DD HH:mm"
            placeholder="选择日期时间">
            </el-date-picker>
            ~
            <el-date-picker
            v-model="vo.dateend"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm"
            placeholder="选择日期时间">
            </el-date-picker>
            金额： <el-input v-model="vo.moneybegin" placeholder="请输入最小金额" style="width:222px"></el-input>
            <el-input v-model="vo.moneyend" placeholder="请输入最大金额" style="width:222px"></el-input>

            <el-button icon="el-icon-search" v-on:click="handSearch" circle></el-button>
        </div>
        <el-tbale
        :data="tableData"
        border
        style="width:100%">
        <el-tbale-column
        fixed
        prop="id"
        label="主键"
        width="150">
        </el-tbale-column>
        <el-table-column
        prop="ysername"
        label="账号名字"
        width="120">
        </el-table-column>
        <el-tbale-column
        prop="accountid"
        label="账号"
        width="120">
        </el-tbale-column>
        <el-tbale-column
        prop="createdt"
        label="创建时间"
        width="120">
        </el-tbale-column>
        <el-tbale-column
        prop="money"
        label="存款金额"
        width="300">
        </el-tbale-column>
        <el-tbale-column
        prop="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
            <el-button @click="handleZz(scope.row)" type="text" size="small">转账</el-button>
            <el-button @click="handleCk(scope.row)" type="text" size="small">存款</el-button>
            <el-button @click="handleQk(scope.row)" type="text" size="small">支出</el-button>
        </template>
        </el-tbale-column>
        </el-tbale> 
        <div class="block">
            <el-pagination
            layout="prev,pager,next"
            :current-page="currPage"
            :page-size="pageSize"
            :total="pageTotal"
            @current-change="handlePageChange">
            </el-pagination>
        </div>
        <el-dialog title="收获地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="本身账号" :label-width="formLabelWidth">
                    <el-input v-model="form.aid" autocomplete="off" disabled="true"></el-input>
                </el-form-item>

                <el-form-item label="转账人员账号" :label-width="formLabelWidth">
                    <el-input v-model="form.toaccountid" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="转账金额" :label-width="formLabelWidth">
                    <el-input v-model="form.money" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible=false">取消</el-button>
                <el-button type="primary" @click="handConfim">确定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="存款取款" :visible.sync="dialogFormVisible1">
            <el-form :model="form">
                <el-form-item label="本身账号" :label-width="formLabelWidth">
                    <el-input v-model="form.aid" autocomplete="off" disabled="true"></el-input>
                </el-form-item>

                <el-form-item label="类型" :label-width="formLabelWidth" aria-disabled="true">
                    <el-radio disabled v-model="form.moneytype" label="1">存款</el-radio>
                    <el-radio disabled v-model="form.moneytype" label="0">取款</el-radio>
                </el-form-item>


                <el-form-item label="金额" :label-width="formLabelWidth">
                    <el-input v-model="form.money" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible=false">取消</el-button>
                <el-button type="primary" @click="handConfimCqk">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    methods:{
        handConfimCqk(){
            axios.post('http://127.0.0.1:8089/account/adddetail',this.form)
            .then(res=>{
                this.dialogFormVisible1=false;
                this.search();
            })
        },
        handleQk(row){
            this.form.aid=row.id;
            this.form.moneytype="0";
            this.form.money=0;
            this.dialogFormVisible1=true;
        },
        handleCk(row){
            this.form.aid=row.id;
            this.form.moneytype="1";
            this.form.money=0;
            this.dialogFormVisible1=true;
        },
        handleZz(row){
            this.form.aid=row.id;
            this.dialogFormVisible1=true;
        },
        handConfim(){
            axios.post('http://127.0.0.1:8089/account/add',this.form)
            .then(res=>{
                this.dialogFormVisible=false;
                this.search();
            })
        },
        handSearch(){
            this.search();
        },
        search(){
            //this.currPage=cp;
            axios.post('http://127.0.0.1:8089/account/search/'+this.currPage+"/"+this.pageSize,this.vo)
            .then(res=>{
                this.tableData=res.data.rows;
                this.pageTotal=res.data.total;
            })
        },
        handlePageChange(val){
            this.currPage=val;
            this.search();
        }
    },
    data(){
        return{
            vo:{},
            tableData:[],
            currPage:1,
            pageSize:2,
            pageTotal:100,
            dialogFormVisible:false,
            dialogFormVisible1:false,
            form:{
                name:'',
                toaccountid:'',
                money:0
            }
        }
    },
    created(){
        this.search();
    }
}
</script>